<template>
  <!-- 插件的画板样式 -->
  <div id="main" style="width: 700px; height: 300px" @click="fn"></div>
</template>

<script>
// import { getApi } from "../../../../api/homeApi"; //引入方法
import * as echarts from "echarts"; //这个插件需要这样引入
export default {
  data() {
    return {
      listarr: [],
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    fn() {
      getApi().then((res) => {
        this.listarr = res.List;
        this.listarr = series
        console.log(this.listarr.number);
        
      });
    },
    initEcharts() {
      var myecharts = echarts.init(document.getElementById("main")); //使用id获取元素
      myecharts.setOption({
       title: {
    text: '实时拥堵指数变化'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', '今天', '近七天', '本月', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '今天',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '近七天',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '本月',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
        
      
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>